<template>
  <h2>{{ $store.state.counter }}</h2>
  <h2>{{ $store.state.home.counter }}</h2>

  <h2>computed - {{ counter }}</h2>
  <h2>computed - {{ doubleCounter }}</h2>

  <h2>{{ $store.getters['home/doubleCounter'] }}</h2>

  <button @click="addHomeCounter">Home Mutation +1</button>
  <button @click="addHomeCounterAction">Home Action +1</button>

  <button @click="increase">Home mapMutations +1</button>
  <button @click="increaseAction">Home mapActions +1</button>
</template>

<script>
import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'

import { useState, useGetters } from '../hooks/index'

// const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers('home')
export default {
  methods: {
    addHomeCounter() {
      this.$store.commit('home/increase')
    },
    addHomeCounterAction() {
      this.$store.dispatch('home/increaseAction')
    }
    // 1.写法一:
    // ...mapMutations({
    //   increase: "home/increase"
    // }),
    // ...mapActions({
    //   increaseAction: "home/increaseAction"
    // }),

    // 2.写法二
    // ...mapMutations("home", ["increase"]),
    // ...mapActions("home", ["increaseAction"]),

    // 3.写法三:
    // ...mapMutations(["increase"]),
    // ...mapActions(["increaseAction"]),
  },
  computed: {
    // 1.写法一:
    // ...mapState({
    //   counter: state => state.home.counter
    // }),
    // ...mapGetters({
    //   doubleCounter: "home/doubleCounter"
    // })
    // 2.写法二:
    // ...mapState("home", ["counter"]),
    // ...mapGetters("home", ["doubleCounter"])
    // 3.写法三:
    // ...mapState(["counter"]),
    // ...mapGetters(["doubleCounter"])
  },
  setup() {
    // const state = useState(['counter'])
    // const rootGetters = useGetters(['doubleCounter'])
    // const getters = useGetters('home', ['doubleCounter'])

    // const mutations = mapMutations(['increase'])
    // const actions = mapActions(['increaseAction'])

    // return {
    //   ...state,
    //   ...getters,
    //   ...rootGetters,
    //   ...mutations,
    //   ...actions
    // }
  }
}
</script>

<style scoped></style>
